// 处理权限路由的vuex
// vuex中的permission模块用来存放当前的 静态路由 + 当前用户权限的动态路由

import { constantRoutes, asyncRoutes } from '@/router' // constantRoutes 静态路由，谁都可以访问

export default {
  namespaced: true,
  state: {
    routes: constantRoutes // 所有人默认拥有静态路由
  },
  mutations: {
    setRoutes(state, newRoutes) {
      // newRoutes可以认为是用户登录之后，通过权限获取到的动态路由部分
      // 每次更新之后，应该在原有的静态路由的基础上再添加。
      state.routes = [...constantRoutes, ...newRoutes]
    }
  },
  actions: {
    // 筛选权限路由
    // menus就是传递过来的数据，是当前用户所拥有的菜单权限 => menus：['settings', 'permissions', ...]
    // asyncRoutes 是所有的动态路由 => [{path:'settings',name:'settings'},{..},{...}]
    filterRoutes(context, menus) {
      const routes = [] // 定义一个筛选出来的数组
      menus.forEach((key) => {
        // key 就是标识
        // asyncRoutes中找有没有对象中的name属性等于key的，如果找到了就筛选出来，说明用户有该权限。没找到就是没有权限
        const routesFilter = asyncRoutes.filter((item) => item.name === key) // 得到一个数组，将这个数组push到routes中
        routes.push(...routesFilter)
      })
      // 得到的 routes 是所有模块中满足权限要求的路由数组，routes就是当前用户所拥有的动态路由的权限
      context.commit('setRoutes', routes) // 提交mutations，来改变数据
      return routes
      // 这里为什么要return routes？ => commit提交mutations修改state，state数据是用来显示左侧菜单用的，return出来数据是给addRoutes用的。
    }
  }
}
